import { Col, Input, Row, Select } from 'antd';
import { useEffect, useState } from 'react';

const APP_H5_PATH = 'carrecycle://com.recycloud.carrecycle.module.web_page.activity.webviewactivity?url=';

const ChoosePath: React.FC<{}> = ({ value, onChange }) => {
	const [path, setPath] = useState('');
	const [type, setType] = useState('route-path');

	useEffect(() => {
		let curType = type;
		let curPath = value;
		if (value?.startsWith(APP_H5_PATH)) {
			curType = APP_H5_PATH;
			curPath = value.replace(APP_H5_PATH, '');
			curPath = decodeURIComponent(curPath);
			path;
		} else if (value?.startsWith('carrecycle')) {
			curType = 'app-h5';
			curPath = value;
		}
		setType(curType);
		setPath(curPath);
	}, [value]);

	const options = [
		{ label: 'app-原生路径', value: 'app-h5' },
		{ label: 'app-h5路径', value: APP_H5_PATH },
		{ label: '路由路径', value: 'route-path' },
	];
	const onChangeType = (value: string) => {
		setType(value);
		setPath('');
	};
	const onChangePath = (e: React.ChangeEvent<HTMLInputElement>) => {
		setPath(e.target.value);
		if (type === APP_H5_PATH) {
			onChange(`${APP_H5_PATH}${encodeURIComponent(e.target.value)}`);
		} else if (type === 'app-h5') {
			onChange(e.target.value);
		} else {
			onChange(e.target.value);
		}
	};
	return (
		<Row gutter={16}>
			<Col span={24} className="mb-12px">
				<Select onChange={onChangeType} value={type} options={options} placeholder="请选择类型"></Select>
			</Col>
			<Col span={24}>
				<Input onChange={onChangePath} placeholder="请输入访问路径" value={path}></Input>
			</Col>
		</Row>
	);
};

export default ChoosePath;
